<template>
  <ex-dialog width="700px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <div class="main" v-loading="loading">
      <template>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"
          :disabled="disabled">
          <el-row>
            <el-col :span="20">
              <el-form-item label="直播状态：">{{ liveStatus == 2 ? '已完成' : '进行中' }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="直播日期：">{{ ruleForm.date }}</el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="直播间：" prop="roomId">
                <el-select v-model="ruleForm.roomId" filterable placeholder="请选择" size="small">
                  <el-option v-for="item in roomIdList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="直播时间：" required>
              <el-col :span="9">
                <el-form-item label="" prop="beginTimeStr">
                  <el-time-select placeholder="开始时间" v-model="ruleForm.beginTimeStr" :picker-options="{
                    start: '00:00',
                    step: '01:00',
                    end: '23:00'
                  }">
                  </el-time-select>
                </el-form-item>
              </el-col>
              <el-col :span="9" :offset="1">
                <el-form-item label="" prop="endTimeStr">
                  <el-time-select placeholder="结束时间" v-model="ruleForm.endTimeStr" :picker-options="{
                    start: '00:00',
                    step: '01:00',
                    end: '23:00',
                    // minTime: startTime
                  }">
                  </el-time-select>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="主播：">
                <el-select v-model="ruleForm.anchorList" filterable multiple placeholder="请选择" size="small">
                  <el-option v-for="item in anchorSelectList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="中控：">
                <el-select v-model="ruleForm.controlList" filterable multiple placeholder="请选择" size="small">
                  <el-option v-for="item in controSelectlList" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="20">
              <el-form-item label="直播客户：" class="live">
                <el-input type="text" maxlength="50" show-word-limit placeholder="请输入"
                  v-model="ruleForm.customerName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="林客ID：" class="live">
                <el-input type="text" maxlength="50" show-word-limit placeholder="请输入"
                  v-model="ruleForm.linkId"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </div>
    <div class="button_box">
      <el-button v-if="pathType == 'edit'" type="danger" :loading="AgreeLoading" @click="delData">移除直播排期</el-button>
      <el-button type="primary" :loading="AgreeLoading" @click="submitForm('ruleForm')">保存提交</el-button>
      <el-button @click="handleClose">取消</el-button>
      
    </div>
  </ex-dialog>
</template>
<script>
import Loading from "@/components/Loading/index";
// api
import {
  addLiveCalendar,
  editLiveCalendar,
  liveCalendarId,
  delLiveCalendar,
  liveCalendarConfirmAdd,
  clientUserSelectList,
  clientRoomSelectList
} from "@/api/customer/rowDateList";
import { parseTime } from '@/utils/index.js'
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
    itemData: Object,
  },
  data() {
    return {
      labelWidth: "150px",
      inputWidth: "420px",
      title: "新增直播详情",
      loading: false,
      disabled: false,
      AgreeLoading: false,
      serviceItemList: [],
      clientIdList: [],
      liveStatus: 1,//直播状态 1进行中 2已完成
      ruleForm: {
        date: '',//直播日期
        roomId: '', //直播间ID
        anchorList: [],//主播集合
        controlList: [],//中控集合
        beginTimeStr: '',//开始时间
        endTimeStr: '',//结束时间
        customerName: '', //直播客户
        linkId: '', //林客ID
      },
      roomIdList: [],//直播间列表
      anchorSelectList: [], //选择主播集合列表
      controSelectlList: [], //选择中控集合列表
      rules: {
        beginTimeStr: [
          { required: true, message: "请选择开始时间", trigger: ["change"] },
        ],
        endTimeStr: [
          { required: true, message: "请选择结束时间", trigger: ["change"] },
        ],
        roomId: [
          { required: true, message: "请选择直播间", trigger: ["change", "bulr"] }
        ],
      },
    };
  },
  computed: {},
  created() {
    this.ruleForm.date = parseTime(this.itemData.date, '{y}-{m}-{d}')
    console.log('this.ruleForm',this.ruleForm)
    console.log('this.itemData',this.itemData)
    if (this.pathType == 'add') {
      this.liveStatus = 1
      this.title = '新增直播详情'
    } else {
      this.title = '编辑直播详情'
      this.getDetails()
    }
    this.getClientRoomSelectList(); //直播间下拉框
    this.getClientUserData() //直播人员下拉框
  },
  mounted() { },
  computed: {},
  methods: {
    // 获取详情
    getDetails() {
      console.log()
      liveCalendarId(this.id)
        .then((res) => {
          this.ruleForm = Object.assign(this.ruleForm, res.result)
          this.liveStatus = this.ruleForm.status
        }).finally(() => {

        });
    },
    //直播间下拉框
    getClientRoomSelectList() {
      clientRoomSelectList()
        .then((res) => {
          this.roomIdList = res.result;
        })
        .finally(() => {

        });
    },
    // 获取直播人员数据
    async getClientUserData() {
      this.anchorSelectList = await this.getClientUserSelectList(1); //直播人员下拉框 角色类型 1 主播 2 中控
      this.controSelectlList = await this.getClientUserSelectList(2); //直播人员下拉框 角色类型 1 主播 2 中控
    },
    // 直播人员下拉框 角色类型 1 主播 2 中控
    getClientUserSelectList(type) {
      return new Promise((resolve, reject) => {
        var params = {
          type:type
        }
        clientUserSelectList(params).then(res => {
          resolve(res.result)
        }).catch(err => {
          console.log(err)
          reject(false)
        })
      })
    },
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
    // 移除直播数据
    delData() {
      var _this = this
      this.$confirm('此操作将删除直播排期, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.AgreeLoading = true;
        delLiveCalendar(_this.id).then(res => {
          this.$message.success("删除成功");
          setTimeout(() => {
            this.handleClose();
            this.$emit("success", res.result);
            this.AgreeLoading = false;
          }, 1000)

        }).finally(() => {
          this.AgreeLoading = false;
        });
      }).catch(() => {

      });
    },
    // 添加直播数据
    addData() {
      this.AgreeLoading = true;
      var data = {
        ...this.ruleForm,
      };
      addLiveCalendar(data)
        .then((res) => {
          this.$message.success("添加成功");
          setTimeout(()=>{
            this.handleClose();
            this.$emit("success", res.result);
            this.AgreeLoading = false;
          },1000)

        })
        .finally(() => {
          this.AgreeLoading = false;
        });
    },
    // 修改直播数据
    editData() {
      this.AgreeLoading = true;
      var data = {
        ...this.ruleForm,
      };
      editLiveCalendar(data)
        .then((res) => {
          this.$message.success("修改成功");
          setTimeout(()=>{
            this.handleClose();
            this.$emit("success", res.result);
            this.AgreeLoading = false;
          },1000)
        })
        .finally(() => {
          this.AgreeLoading = false;
        });
    },
    submitFormData() {
      var _this = this
      var data = {
        ...this.ruleForm,
      };
      liveCalendarConfirmAdd(data)
        .then((res) => {
          var data = res.result
          if (data.flag) {
            this.$confirm(data.msg, '温馨提示', {
              confirmButtonText: '确定提交',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              if (this.pathType == 'add') {
                _this.addData()
              } else {
                _this.editData()
              }
            }).catch(() => {

            });
          } else {
            if (this.pathType == 'add') {
              _this.addData()
            } else {
              _this.editData()
            }
          }

        })
        .finally(() => {
          this.AgreeLoading = false;
        });
    },
    submitForm(formName) {
      console.log(this.ruleForm);
      //创建确定
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitFormData()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }

  ::v-deep {

    .el-input,
    .el-select {
      width: 100%;
    }

    .live {
      .el-input__suffix {
        right: -46px;
      }
    }
  }
}

.main {
  padding: 20px 20px;
}

.button_box {
  display: flex;
  justify-content: center;
}
</style>